<script setup lang="ts">
import { before } from "node:test";
import { ref } from "vue";
const visible = ref<boolean>(false);
const resolve = ref();
const reject = ref();

const formData = ref({
  inp: "",
});

// 打开抽屉
const open: () => Promise<unknown> = () => {
  return new Promise((_resolve, _reject) => {
    resolve.value = _resolve;
    reject.value = _reject;
    visible.value = true;
  });
};

// 关闭抽屉
const close = () => {
  visible.value = false;
  reject.value("关闭抽屉");
};

// 确定
const handleSure = () => {
  resolve.value(formData.value);
  close();
};

defineExpose({
  open,
});
</script>

<template>
  <xt-drawer title="异步化抽屉" v-model="visible" :before-close="close">
    <xt-input v-model="formData.inp" />
    <template #footer>
      <div class="w-full center">
        <xt-button @click="handleSure">确 定</xt-button>
        <xt-button type="default" @click="close">取 消</xt-button>
      </div>
    </template>
  </xt-drawer>
</template>
